<template>
  <view class="content_notify">
    <view class="toptabs">
      <view :class="{active: tabValue==0}" @touchStart="changeList(0)">未读通知</view>
      <view :class="{active: tabValue==1}" @touchStart="changeList(1)">已读通知</view>
    </view>
    <view class="list_container" v-if="showList.length">
      <nut-list class="lists" @scroll-bottom="handleScroll" :listData="showList" style="height: calc(100vh - 92rpx);">
        <template v-slot="{ item, index }">
          <list-item :item="item" :index="index"></list-item>
        </template>
      </nut-list>
    </view>
    <view v-else>
      <view class="container_empty">
        <image mode="aspectFit" src="../../assets/images/index/empty2.png"></image>
        <view class="empty_text">暂无通知消息</view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, reactive, watch } from "vue";
import ListItem from "./listItem.vue";
import {$post,$get} from "@/@api";
import Taro from "@tarojs/taro";
const loading = ref(false);
const tabValue = ref<number>(0)
const showList = ref([])
const params = ref({
  pageNum: 1,
  pageSize: 10
})
function changeList(val) {
  tabValue.value = val
  params.value.pageNum = 1
  showList.value
  getList()
}

async function getList() {
  // // Taro.showLoading({
  // //   title: "加载中",
  // //   mask: true,
  // // });
  // const res: any = await $post(
  //     "/selfmachine-system/order/list/searchSignatureList",
  //     {
  //       type: tabValue.value,
  //       ...params
  //     }
  // )
  // if (res.data.code == 200) {
  //   showList.value = showList.value.concat(res.data.rows || [])
  // }
  // // Taro.hideLoading()
  // if (showList.value.length >= res.data.data.total) {
  //   loading.value = true;
  // }

  // const res: any = await $post(
  //     "/selfmachine-system/order/list/searchSignatureList",
  //     {
  //       type: tabValue.value,
  //       ...params
  //     }
  // )

  // showList.value = [
  //   {
  //     title: '承运单签名通知',
  //     count: 1,
  //     time: '2023-07-28 12:22:35',
  //     billNo: '333332020',
  //   },
  //   {
  //     title: '承运单签名通知',
  //     count: 1,
  //     time: '2023-07-28 12:22:35',
  //     billNo: '333332020',
  //   },
  //   {
  //     title: '承运单签名通知',
  //     count: 1,
  //     time: '2023-07-28 12:22:35',
  //     billNo: '333332020',
  //   },
  // ]
  showList.value = []
}

async function onLoadList() {
  loading.value = true;
  params.value.pageNum++;
  getList();
}

function handleScroll() {
  if (!loading.value) {
    loading.value = true;
    onLoadList();
  }
}


changeList(0)

</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
}
.content_notify {
  width: 100%;
  .toptabs {
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 88rpx;
    border-bottom: 2rpx solid #f5f5f5;
    > view {
      width: 50%;
      font-size: 28rpx;
      color: #666;
      line-height: 88rpx;
      text-align: center;
      position: relative;
      &.active {
        font-size: 32rpx;
        color: #0966ff;
        &:before {
          content: '';
          position: absolute;
          width: 48rpx;
          height: 4rpx;
          top: 72rpx;
          left: calc(50% - 24rpx);
          background-color: #0966ff;
        }
      }
    }
  }
  .list_container {
  }
  .lists {
    box-sizing: border-box;
    width: 100%;
    margin-top: 2rpx;
  }
}
.container_empty {
  width: 80%;
  margin: 280rpx auto;
  text-align: center;

  image {
    width: 300rpx;
    height: 300rpx;
  }
  .empty_text {
    font-size: 32rpx;
    color: #999;
  }

}
</style>
